<!doctype html>
<html>
<head>
<title>GQuery Effects Sample</title>
<script language="javascript" src="SlideEffectsSample.nocache.js"></script>
<style type="text/css">
	body {
	    font-family: Helvetica;
	}
	.reset {
	    float: left;
	}
	.foo {
	    border: 1px solid black;
	    font-size: 80%;
	}
</style>
</head>
<body>
<h1>Slide Effects Sample</h1>
<p>This page lists and shows all slide effects available in GwtQuery</p>

<table cellpadding="10" cellspacing="10">
    <tr>
        <td>
            <h2>SlideUp</h2>
            <div id="slideUp">
            <div class="foo" style="width: 200px;">Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Vestibulum ultricies
            nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed
            vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam
            venenatis dictum sem, eget euismod dui laoreet non. Morbi in
            diam nibh.</div>
            <button>SlideUp !</button>
            <button class="reset">Reset</button>
            </div>
        </td>
        <td>
            <h2>SlideLeft</h2>
            <div id="slideLeft">
            <div class="foo" style="width: 200px; height: 200px;">Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            ultricies nulla condimentum diam viverra vitae hendrerit lorem
            tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a
            nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non.
            Morbi in diam nibh.</div>
            <button>SlideLeft</button>
            <button class="reset">Reset</button>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <h2>SlideDown</h2>
            <div id="slideDown">
            <div class="foo" style="width: 200px;">Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Vestibulum ultricies
            nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed
            vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam
            venenatis dictum sem, eget euismod dui laoreet non. Morbi in
            diam nibh.</div>
            <button>SlideDown</button>
            <button class="reset">Reset</button>
            </div>
        </td>
        <td>
            <h2>SlideRight</h2>
            <div id="slideRight">
            <div class="foo" style="width: 200px; height: 200px;">Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
            ultricies nulla condimentum diam viverra vitae hendrerit lorem
            tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a
            nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non.
            Morbi in diam nibh.</div>
            <button>SlideRight</button>
            <button class="reset">Reset</button>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <h2>SlideToogle</h2>
            <div id="slideToogle">
            <div class="foo" style="width: 200px;">Lorem ipsum dolor
            sit amet, consectetur adipiscing elit. Vestibulum ultricies
            nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed
            vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam
            venenatis dictum sem, eget euismod dui laoreet non. Morbi in
            diam nibh.</div>
            <button>SlideToggle</button>
        </td>
        <td></td>
        </div>
    </tr>



</table>
</body>
</html>
